<template>
    <div class="learnHeaderContainers">
        <div v-for="(listItem, listIndex) in headerList" :key="listIndex" class="learnHeaderContainers_item" :class="currentIndex==listIndex?'active':''" @click="tabClickEvent(listItem, listIndex)">
            <i :class="listItem.icon" class="learnHeaderContainers_item_icon"></i>
            <div class="learnHeaderContainers_item_name">{{ listItem.name }}</div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'learnHeader',
    props: {
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    components: {

    },
    data() {
        return {
            tabIndex:this.currentIndex,
            headerList: [
                {
                    id: 0,
                    name: '教材阅读',
                    icon: 'el-icon-reading'
                },
                {
                    id: 1,
                    name: '基础知识点',
                    icon: 'el-icon-folder'
                },
                // {
                //     id: 2,
                //     name: '专病知识点',
                //     icon: 'el-icon-document-checked'
                // },
                {
                    id: 3,
                    name: '3D大体标本',
                    icon: 'el-icon-document-copy'
                },
                {
                    id: 4,
                    name: '章节练习',
                    icon: 'el-icon-edit'
                },
                {
                    id: 5,
                    name: '课件学习',
                    icon: 'el-icon-notebook-2'
                },
                // {
                //     id: 6,
                //     name: '我的错题集',
                //     icon: 'el-icon-folder-delete'
                // },
                // {
                //     id: 7,
                //     name: '我的收藏',
                //     icon: 'el-icon-suitcase'
                // },
                // {
                //     id: 8,
                //     name: '我的笔记',
                //     icon: 'el-icon-edit-outline'
                // }
            ]
        };
    },
    mounted() {
        const { state } = this.$store;


    },
    computed: {

    },
    methods: {
        tabClickEvent(item,index){
            this.tabIndex=index
            let data={
                index:index,
                ...item
            }
            this.$emit('tabClickEvent',data)
        }
    },
};
</script>

<style scoped lang="scss">
.learnHeaderContainers::-webkit-scrollbar{
    width: 4px;
}
.learnHeaderContainers::-webkit-scrollbar-track{
    border-radius: 10px;
  /*滚动条的背景区域的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
  background-color: #eeeeee;
  cursor: pointer;
  /*滚动条的背景颜色*/
}
.learnHeaderContainers::-webkit-scrollbar-thumb{
    border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
  background-color: #3a62d7 !important;
  cursor: pointer;
  /*滚动条的背景颜色*/
}
.learnHeaderContainers{
    height:100%;
    width:100%;
    background:#fff;
    border-radius: 4px;
    overflow-y: auto;
    &_item{
        display: flex;
        align-items: center;
        cursor: pointer;
        height:40px;
        line-height: 40px;
        padding-left:10px;
        &_icon{
            font-size:14px;
            margin-right:4px;
        }
        &_name{
           font-size:14px;
        }
    }
    &_item.active{
        background:rgb(58, 98, 215);
        color:#fff;
    }
}

</style>
